<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
	<style>
		body{
			background:#ebebeb;
		}
		.nav{
			width:600px;
			height: 50px;
			line-height: 50px;
			float: left;
			/*圆角半径*/
			border-radius: 8px; 
			list-style: none;
			background-color: #f65f57;
			/*盒子阴影*/
			box-shadow:3px 6px 1px #b64b41;
		}
		.nav li{
			float: left;
			padding:0 16px;
			/*文字阴影*/
			text-shadow: 1px 2px 4px rgba(0,0,0,.5);
		}
		.nav li a{
			text-decoration: none;
			color:white;
			-webkit-transition: all 0.2s ease-in;
			-moz-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			-ms-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			/*不加display:inline-block无法实现伪类动画效果*/
			display: inline-block;
			cursor:pointer;

		}

		.nav li a:hover{
			-webkit-transform:rotate(10deg);
			-moz-transform:rotate(10deg);
			-o-transform:rotate(10deg);
			-ms-transform:rotate(10deg);
			transform:rotate(10deg);
		}
		.nav li{
			/*渐变分割线*/
			background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;
		}
		/*删除第一项和最后一项导航分隔线*/
		.nav li:last-child{
			background:none;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li><a href="">Home</a></li>
		<li><a href="">About Me</a></li>
		<li><a href="">Portfolio</a></li>
		<li><a href="">Blog</a></li>
		<li><a href="">Resources</a></li>
		<li><a href="">Contact Me</a></li>
	</ul> 

	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>